<template>
    <div class="box">
        <p class="title">网页配置更新</p>
        <el-form :model="list" status-icon ref="form" label-width="110px" :rules="rules">
            <el-form-item label="配置名字" prop="name">
                <el-input v-model="list.name"></el-input>
            </el-form-item>
            <el-form-item label="字段" prop="code">
                <el-input v-model="list.code"></el-input>
            </el-form-item>
            <el-form-item label="展示内容" prop="type">
                <el-select v-model.number="list.type" placeholder="请选择">
                    <el-option label="文字" :value="1"></el-option>
                    <el-option label="图片" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文字内容" prop="info" v-if="list.type===1"> 
                <el-input v-model="list.info"></el-input>
            </el-form-item>
            <el-form-item label="图片内容"   v-else-if="list.type===2">
                <el-upload ref="upload" action="http://api.zhonpay.com/admin/upload/upload" name="image" :limit="1" list-type="picture" :file-list="fileList" :on-success="uploadImgSuccess" :on-remove="uploadImgRemove">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip">请上传jpg/png格式文件，且不超过1024kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item class="whole-handle-btn-box">
                <el-button type="primary" @click="handleCertain">确定</el-button>
                <router-link class="back-btn" to="index">
                    <el-button>返回</el-button>
                </router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: {
            },
            rules: {
                name: { required: true, message: "名字不能为空", trigger: "blur" },
                code: { required: true, message: "字段不能为空", trigger: "blur" },
                info: { required: true, message: "内容不能为空", },
            },
			fileList:[]
        };
    },
    created() {
		this.getQuery()
    },
    methods: {
        uploadImgSuccess(response, file, fileList) {
            if (response.code === 200) {
                this.$message({
                    message: response.msg
                });
                this.list.info = response.content.path;
            } else {
                this.$message({
                    type: "warning",
                    message: response.msg
                });
            }
        },
        // 移除上传成功的图片，刷新数据
        uploadImgRemove(event) {
            this.$set(this.$data.list, "info", "");
        },
        // 确定添加导航
        handleCertain() {
            const _this = this;
            this.$refs.form.validate(bool => {
                if (bool) {
                    this.$confirm("您确定要添加么?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.$axios({
                                url: "admin/content/setConfig",
                                data: {
									configID:_this.list.id,
                                    name: _this.list.name,
                                    code: _this.list.code,
                                    info: _this.list.info,
                                    type:_this.list.type,
                                },
                                success(res) {
                                    if (res.data.code === 200) {
                                        _this.$message({
                                            type: "success",
                                            message: res.data.msg
                                        });
                                        _this.$router.go(-1);
                                    } else {
                                        _this.$message({
                                            type: "warning",
                                            message: res.data.msg
                                        });
                                    }
                                }
                            });
                        })
                        .catch(() => { });
                }
            });
        },
		// 获取传值
		getQuery(){
			this.list=this.$route.query.info;
			if(this.list.type==2){
				this.fileList.push({
					"url":this.list.info,
					"name":'image',
				});
			}
		}
    }
};
</script>

<style scoped>
.box {
    padding: 30px;
    width: 100%;
}
.el-form {
    width: 50%;
    margin: 0 auto;
}
.title {
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
}
.back-btn {
    margin-left: 10px;
}
#editor >>> .w-e-menu {
    padding: 0 8px;
}
</style>
